<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="碧桂园大数据平台" name="keywords" />
    <meta content="碧桂园大数据平台" name="description" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/common.css" />
    <link rel="stylesheet" type="text/css" href="css/elementUI/index.css" />
    <link rel="stylesheet" type="text/css" href="css/elementUI/plugins.css" />
</head>
<body>
    <div class="cost-page cost-add-page" v-cloak>
        <!--步骤条-->
        <div class="cost-header">
            <ul class="step1">
                <li class="active">目标成本导入校验</li>
                <li>关联产品</li>
                <li>填写政府要求</li>
                <li>评估结果</li>
            </ul>
        </div>

        <!--表单-->
        <div class="cost-main">
            <div class="b_1">
                <div class="cost-main-title fs14 fw c_333">
                    <span>目标成本导入</span>
                    <span class="c_999 pl30">以下带" <span class="c_red">*</span> "号均为必填项，其余选填</span>
                </div>
                <div class="bg_white p20 bt_1">
                    <el-form :model="form" :rules="rules" ref="form" label-position="left"
                             size="small" :inline="true" style="margin-left: 80px;">
                        <el-form-item label="区域" required prop="region">
                            <el-select v-model="form.region" clearable placeholder="" >
                                <el-option
                                        v-for="item in regionList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="关联明源期区" required prop="periods">
                            <el-select v-model="form.periods" clearable placeholder="">
                                <el-option
                                        v-for="item in periodsList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                    <span class="fl pr10">{{ item.label }}</span>
                                    <span class="fr c_red" :class="{'c_red' : item.status == '未审核', 'c_green' : item.status == '已审核'}">{{ item.status }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="所属片区" required prop="area">
                            <el-select v-model="form.area" clearable placeholder="">
                                <el-option
                                        v-for="item in areaList"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="行政区划" required prop="zoning">
                            <el-cascader
                                    :options="zoningList"
                                    v-model="form.zoning">
                            </el-cascader>
                        </el-form-item>
                    </el-form>
                    <el-form :model="fileForm" :rules="rules" ref="fileForm" class="upload-el-form"
                             size="small" :inline="true" label-position="top" style="margin-left: 80px;">
                        <el-form-item label="方案版目标成本" required prop="file1" style="margin-right: 195px;">
                            <el-upload
                                    ref="uploadFile1"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-change="handleChangeFile1"
                                    :on-success="onSuccessFile1"
                                    :limit="1"
                                    :file-list="fileList1"
                                    :show-file-list="false">
                                <el-input disabled v-model="fileForm.file1"></el-input>
                                <el-button size="small" slot="trigger" @click="fileList1 = []">浏览</el-button>
                                <div class="c_green" v-if="showUploadRes1 && successFile1" style="position: absolute;left: 10px;">导入文件成功</div>
                                <div class="c_red" v-if="showUploadRes1 && !successFile1" style="position: absolute;left: 10px;">当前导入套表缺失：规划指标表、总成本表、分业态综合成本表。</div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item label="投资版目标成本" required prop="file2">
                            <el-upload
                                    ref="uploadFile2"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    :on-change="handleChangeFile2"
                                    :on-success="onSuccessFile2"
                                    :limit="1"
                                    :file-list="fileList2"
                                    :show-file-list="false">
                                <el-input disabled v-model="fileForm.file2"></el-input>
                                <el-button size="small" slot="trigger" @click="fileList2 = []">浏览</el-button>
                                <div class="c_green" v-if="showUploadRes2 && successFile2" style="position: absolute;left: 10px;">导入文件成功</div>
                                <div class="c_red" v-if="showUploadRes2 && !successFile2" style="position: absolute;left: 10px;">当前导入套表缺失：规划指标表、总成本表、分业态综合成本表。</div>
                            </el-upload>
                        </el-form-item>
                    </el-form>
                    <div class="mt20 tc">
                        <el-button type="primary" size="small" @click="submitForm()">开始校验</el-button>
                    </div>
                </div>
            </div>
            <div class="mt20 b_1" v-show="resultShow">
                <div class="cost-main-title fs14 fw c_333">
                    <span>目标成本稽查结果</span>
                </div>
                <div class="bg_white p20 bt_1">
                    <el-table :data="tableData" size="small" border style="width: 100%" max-height="480px">
                        <el-table-column label="序号" type="index" width="50" header-align="center" align="center"></el-table-column>
                        <el-table-column prop="name" label="表格勾稽检查要点" header-align="center" align="left"></el-table-column>
                        <el-table-column prop="status" label="是否检查通过" width="120" header-align="center" align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.status == 0" class="c333">通过</span>
                                <span v-if="scope.row.status == 1" class="c_red">不通过</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="mt20 pos-rel ov-h">
                        <el-col :span="1.5" class="pr20">评估结论：</el-col>
                        <el-col :span="23.5">
                            <div class="c_666">1、方案版套表稽查校验通过，请继续下一步；</div>
                            <div class="c_red">1、{{tableName1}}表格数据不闭合，请核查方案版套表后重新评估；</div>
                            <div class="c_red">2、{{tableName2}}表格数据不闭合，请核查方案版套表后重新评估；</div>
                        </el-col>
                    </div>
                </div>
            </div>
        </div>

        <!--底部按钮-->
        <div class="cost-footer">
            <el-button type="primary" @click="saveToDraft()">存草稿</el-button>
            <el-button type="primary" @click="goToNextStep()">下一步</el-button>
            <el-button>退出</el-button>
        </div>

        <!--草稿箱-->
        <div class="cost-draft" @click="draftDialogVisible = true">
            <img src="./images/cost/icon-draft.png"/>
            <div class="pt10">草稿箱</div>
        </div>
        <draft-plugins v-if="draftDialogVisible"></draft-plugins>
    </div>
</body>
<script src="js/common/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="js/vue/vue-dev.js" type="text/javascript"></script>
<script src="js/elementUI/index.js" type="text/javascript"></script>
<script src="js/common/main.js" type="text/javascript"></script>
<script type="text/javascript">
    var app = new Vue({
        el: '.cost-add-page',
        data() {
            return {
                regionList: [
                    {value: '01', label: '江中区域'},
                    {value: '02', label: '粤东区域'},
                ],
                periodsList: [
                    {value: '01', label: '十里银滩碧桂园一期', status: '已审核'},
                    {value: '02', label: '十里银滩碧桂园二期', status: '未审核'},
                ],
                areaList: [
                    {value: '01', label: '广清区域'},
                    {value: '02', label: '南沙城市公司'},
                ],
                zoningList: [
                    {
                        value: 'zhinan',
                        label: '广东省',
                        children: [{
                            value: 'shejiyuanze',
                            label: '广州市',
                            children: [{
                                value: 'yizhi',
                                label: '白云区'
                            }, {
                                value: 'fankui',
                                label: '天河区'
                            }, {
                                value: 'xiaolv',
                                label: '越秀区'
                            }, {
                                value: 'kekong',
                                label: '可控'
                            }]
                        }, {
                            value: 'daohang',
                            label: '导航',
                            children: [{
                                value: 'cexiangdaohang',
                                label: '侧向导航'
                            }, {
                                value: 'dingbudaohang',
                                label: '顶部导航'
                            }]
                        }]
                    }
                ],
                form: {
                    region: '',
                    periods: '',
                    area: '',
                    zoning: [],
                },
                fileForm: {
                    file1: '',
                    file2: '',
                },
                fileList1: [],
                showUploadRes1: false,
                showUploadRes2: false,
                successFile1: null,
                successFile2: null,
                fileList2: [],
                rules: {
                    region: [
                        { required: true, message: '请选择区域', trigger: 'change' }
                    ],
                    periods: [
                        { required: true, message: '请选择关联明源期区', trigger: 'change' }
                    ],
                    area: [
                        { required: true, message: '请选择所属片区', trigger: 'change' }
                    ],
                    zoning: [
                        { required: true, message: '请选择行政区划', trigger: 'change' }
                    ],
                    file1: [
                        { required: true, message: '请选择方案版目标成本', trigger: 'change' }
                    ],
                    file2: [
                        { required: true, message: '请选择投资版目标成本', trigger: 'change' }
                    ],
                },
                resultShow: false,
                tableData: [
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '0',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '1',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '0',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '1',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '0',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '1',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '0',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '1',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '0',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '1',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '0',
                    },
                    {
                        name: '《表5 总投资计划及利润》与《表5 含增值税总投资计划及利润》销售部分净利润一致',
                        status: '1',
                    },
                ],
                tableName1: '《表5 总投资计划及利润》',
                tableName2: '《表5 含增值税总投资计划及利润》',
                draftDialogVisible: false,
            }
        },
        methods: {
            submitForm() {
                var res = false;
                this.$refs['form'].validate((valid) => {
                    res = valid;
                });
                this.$refs['fileForm'].validate((valid) => {
                    res = valid;
                });
                if(res){
                    Object.assign(this.form, this.fileForm);
                    this.resultShow = true;
                    console.log(this.form);
                }
            },
            saveToDraft () {
                this.$message({
                    duration: 0,
                    message: '保存成功'
                });
            },
            goToNextStep () {
                window.location.href = 'A02新建评估-步骤2（所有人员）.html';
            },
            onSuccessFile1(response, file, fileList){
                if(response){
                    this.successFile1 = true;
                }else{
                    this.successFile1 = false;
                }
                this.showUploadRes1 = true;
            },
            onSuccessFile2(response, file, fileList){
                if(response){
                    this.successFile2 = true;
                }else{
                    this.successFile2 = false;
                }
                this.showUploadRes2 = true;
            },
            handleChangeFile1(file, fileList) {
                this.fileForm.file1 = file.name;
            },
            handleChangeFile2(file, fileList) {
                this.fileForm.file2 = file.name;
            },
        },
        components: {
            'draft-plugins': draftPlugins
        }
    });
</script>
</html>